<template>
    <div :key="renderKey" class="content-info">
        <h4>{{ title }}</h4>
        <a-form-model ref="dynamicValidateForm" :model="formMadel" :rules="formRules" layout="vertical">
            <a-form-model-item v-for="(item, index) in getModuleList" :key="index" :prop="item.key">
                <span slot="label">
                    {{ item.title }}
                    <font>{{ item.multiple ? '(可多选,最多10个)' : '' }}</font></span>
                <a-checkbox-group v-if="item.multiple" v-model="formMadel[item.key]" @change="renderKey++">
                    <a-checkbox v-for="(subItem, i) in item.dictList" :key="i" :value="subItem.name">
                        {{ subItem.name }}
                    </a-checkbox>
                    <a-button v-if="item.userDefined" class="editable-button" @click="InputShow(item)"> 其他,请输入... </a-button>
                    <a-input v-if="item.editable" class="editable-input" placeholder="请输入" :max-length="30" @blur="handlePush($event, item)" />
                </a-checkbox-group>
                <a-radio-group v-if="!item.multiple" v-model="formMadel[item.key]" button-style="solid" @change="renderKey++">
                    <a-radio-button v-for="(subItem, i) in item.dictList" :key="i" :value="subItem.name">
                        {{ subItem.name }}
                    </a-radio-button>
                    <a-button v-if="item.userDefined" class="editable-button" @click="InputShow(item)"> 其他,请输入... </a-button>
                    <a-input v-if="item.editable" class="editable-input" placeholder="请输入" :max-length="30" @blur="handlePush($event, item)" />
                </a-radio-group>
            </a-form-model-item>
        </a-form-model>
        <div class="btn">
            <a-button style="margin-left: 10px" @click="prev"> 上一步 </a-button>
            <a-button type="primary" html-type="submit" @click="submitForm('dynamicValidateForm')"> 下一步 </a-button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ContentInfo',
    props: {
        title: {
            type: String,
            default: () => {
                return ''
            }
        },
        moduleList: {
            type: Array,
            default: () => {
                return []
            }
        },
        current: {
            type: Number,
            default: () => {
                return 0
            }
        }
    },
    data () {
        return {
            renderKey: 0
        }
    },
    computed: {
        getModuleList () {
            const list = []
            const ArrayList = JSON.parse(JSON.stringify(this.moduleList))
            ArrayList.forEach((item) => {
                list.push({ ...item, editable: false })
            })
            return list
        },
        formRules () {
            const data = {}
            this.getModuleList.forEach((item) => {
                data[item.key] = [
                    {
                        type: item.multiple ? 'array' : 'string',
                        required: item.required,
                        message: item.title,
                        trigger: 'change'
                    }
                ]
            })
            return data
        },
        formMadel () {
            const data = {}
            this.getModuleList.forEach((item) => {
                data[item.key] = item.multiple ? [] : ''
                item.dictList.forEach((subItem) => {
                    if (subItem.selected) {
                        Array.isArray(data[item.key]) ? data[item.key].push(subItem.name) : (data[item.key] = subItem.name)
                    }
                })
            })
            return data
        }
    },
    mounted () {},
    methods: {
        InputShow (item) {
            this.$nextTick(() => {
                item.editable = !item.editable
                this.renderKey++
            })
        },
        handlePush (e, item) {
            this.$nextTick(() => {
                if (e.target.value) {
                    let flag = true
                    item.dictList.forEach((sub) => {
                        if (sub.name === e.target.value) {
                            flag = false
                            return this.$message.error('选项已存在')
                        }
                    })
                    if (flag) {
                        item.dictList.push({
                            name: e.target.value,
                            selected: false,
                            defined: true
                        })
                        item.editable = !item.editable
                        this.renderKey++
                    }
                } else {
                    return this.$message.warning('请输入选项')
                }
            })
        },
        submitForm (formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    const formData = JSON.parse(JSON.stringify(this.formMadel))
                    for (const key in formData) {
                        if (Object.prototype.toString.call(formData[key]) === '[object String]') {
                            formData[key] = formData[key].split(',')
                        }
                    }
                    const res = await this.$ApiServer['company/srueStep']({
                        step: this.current + 1,
                        ...formData
                    })
                    if (res.code === 200) {
                        this.$emit('next', this.current)
                    } else {
                        this.$message.error(res.message)
                    }
                } else {
                    return false
                }
            })
        },
        prev () {
            this.$emit('prev', this.current)
        }
    }
}
</script>

<style lang="less" scoped>
.content-info {
    margin-top: 0.3rem;
    min-height: 4.75rem;
    h4 {
        font-weight: bold;
        color: @primary-color;
        font-size: 0.16rem;
        position: relative;
        padding-left: 0.14rem;
        &::before {
            content: '';
            display: inline-block;
            width: 0.04rem;
            height: 0.16rem;
            background-color: @primary-color;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }
    }
    .btn {
        display: flex;
        justify-content: flex-end;
        padding-right: 0.2rem;
        margin-top: 0.8rem;
        button + button {
            margin-left: 0.2rem;
        }
    }
}

.ant-form {
    padding: 0.26rem 1rem 0 0.6rem;
    ::v-deep {
        .ant-form-item-label {
            .ant-form-item-required {
                &::before {
                    margin-right: 0;
                }
            }
            span {
                font-size: 0.14rem;
                color: #2a2a2a;
                word-spacing: 0;
                font {
                    font-size: 0.12rem;
                    color: #999999;
                }
            }
        }
        .ant-radio-group {
            display: flex;
            flex-wrap: wrap;
            .ant-radio-button-wrapper {
                height: 0.36rem;
                background: #e9e9e9;
                border: none;
                display: flex;
                justify-content: center;
                color: #2a2a2a;
                font-size: 0.14rem;
                border-radius: 4px;
                margin-right: 0.2rem;
                margin-bottom: 0.1rem;
                padding: 0 0.3rem;
                span {
                    color: #2a2a2a;
                    line-height: 1.1;
                    display: flex;
                    align-items: center;
                }
                &.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
                    box-shadow: none;
                    border: 1px solid @primary-color;
                    background-color: rgba(197, 53, 53, 0.15);
                    color: #2a2a2a;
                    border: 1px solid #fd5454;
                    &::before {
                        display: none;
                    }
                }
                & + .ant-radio-button-wrapper {
                    margin-left: 0;
                    &::before {
                        display: none;
                    }
                }
            }
        }
        .ant-checkbox-group {
            display: flex;
            flex-wrap: wrap;
            .ant-checkbox-wrapper {
                display: flex;
                justify-content: center;
                height: 0.36rem;
                background: #e9e9e9;
                border: none;
                color: #2a2a2a;
                font-size: 0.14rem;
                border-radius: 4px;
                margin-right: 0.2rem;
                margin-bottom: 0.1rem;
                padding: 0 0.3rem;
                span {
                    display: flex;
                    align-items: center;
                    line-height: 1.1;
                    padding: 0;
                }
                &.ant-checkbox-wrapper-checked {
                    box-shadow: none;
                    border: 1px solid @primary-color;
                    background-color: rgba(197, 53, 53, 0.15);
                    color: #2a2a2a;
                    border: 1px solid #fd5454;
                }
                & + .ant-checkbox-wrapper {
                    margin-left: 0;
                }
                .ant-checkbox {
                    display: none;
                }
            }
        }
        .ant-form-item-children {
            display: flex;
            flex-wrap: wrap;
            .editable {
                &-button {
                    width: 100px;
                    height: 0.36rem;
                    background: #e9e9e9;
                    border: none;
                    padding: 0;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: #2a2a2a;
                    border-radius: 4px;
                    margin-top: 0;
                    margin-right: 0.2rem;
                }
                &-input {
                    width: 1.5rem;
                    height: 0.36rem;
                    color: #2a2a2a;
                    border-radius: 4px;
                    margin-top: 0;
                }
            }
        }
    }
}
</style>
